<template>
  <div style="width: 100%;height: 500Px;text-align: center;">
    <div style="width: 80%;height: 150Px;margin-left: 10%;float: left;margin-top: 50px; border:1px solid #bfbfbf">
      <table>
        <tr height="50px;">
          <td>
            <h3>下载导入的模板文件</h3>
          </td>
        </tr>
        <tr height="30px;">
          <td>
            <p class="text-light font-size-14 my-10">请按模板文件填写信息。</p>
          </td>
        </tr>
        <tr height="50px;">
          <td>
            <el-button type="primary" @click="download()" plain>下载模板</el-button>
          </td>
        </tr>
      </table>
    </div>
    <div style="width: 80%;height: 200Px;margin-left: 10%;float: left;margin-top: 50px; border:1px solid #bfbfbf">
      <table>
        <tr height="50px;">
          <td>
            <h3>上传填好的员工信息表</h3>
          </td>
        </tr>
        <tr height="30px;">
          <td>
            <p class="text-light font-size-14 my-10">请按照收据模板的格式准备导入数据，模板中的表头名称不可更改， 表头行不能删除，单次导入的数据不超过1000条。</p>
          </td>
        </tr>
        <tr height="50px;">
          <td>
            <el-upload
              class="upload-demo"
              ref="upload"
              action="/api/asset/fixed/warehousing/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="uploadSuccess"
              :on-exceed="handleExceed"
              :limit="1"
              :file-list="fileList"
              :headers="myHeader"
              :auto-upload="false"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            </el-upload>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { downloadTemplate } from '@/views/wy-asset-management/fixed-warehousing/api/fixed-warehousing.js'
import dbl from '@/utils/dbl'

export default {
  components: {},
  data () {
    return {
      myHeader: { Authorization: dbl.get('token') },
      fileList: [],
    }
  },
  /**
   * 载入事件
   */
  mounted () { },
  created () { },
  methods: {
    /**
     * 下载模板
     */
    download () {
      downloadTemplate()
        .then((res) => {
          // 关闭loading
          this.loading = false
          // 此处有个坑。这里用content保存文件流，最初是content=res，但下载的test.xls里的内容如下图1，
          // 检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
          // 另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
          const content = res.data
          const blob = new Blob([content]) // 构造一个blob对象来处理数据
          const fileName = '资产入库导入模板.xls' // 导出文件名
          // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
          // IE10以上支持blob但是依然不支持download
          if ('download' in document.createElement('a')) {
            // 支持a标签download的浏览器
            const link = document.createElement('a') // 创建a标签
            link.download = fileName // a标签添加属性
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click() // 执行下载
            URL.revokeObjectURL(link.href) // 释放url
            document.body.removeChild(link) // 释放标签
          } else {
            // 其他浏览器
            navigator.msSaveBlob(blob, fileName)
          }
          this.btnSendTem = false
        })
        .catch((error) => {
          this.$message({
            type: 'error',
            message: '操作失败',
          })
        })
        .finally(() => (this.loading = false))
    },

    submitUpload () {
      this.$refs.upload.submit()
    },
    handleRemove (file, fileList) {
      this.fileList = fileList
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      // this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      this.$message.warning(`当前限制选择 1 个文件`)
    },

    /**
     * 上传完成给fileList赋值
     */
    uploadSuccess (response, file, fileList) {
      //拿到文件名
      let fileName = file.name
      //拿到上传的文件地址
      let filePath = file.response.data[0].path
      let files = { name: '', path: '' }
      files.name = fileName
      files.path = filePath
      this.fileList.push(files)
    },
  },
}
</script>



